<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>上海龙华寺地图导览</title>
    <style>
        #container {
            width: 100%;
            height: 800px;
        }
        .info-title {
            color: #1E90FF;
            font-size: 18px;
            font-weight: bold;
            padding: 5px;
        }
        .info-content img {
            width: 280px;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div id="container"></div>

    <!-- 高德地图API -->
    <script src="https://webapi.amap.com/maps?v=2.0&key=8c7f51e8b9ea4ed0e10c2a2f13aa85ac"></script>
    
    <script>
        // 龙华寺坐标（通过高德坐标拾取器获取）
        const templePosition = [121.452735, 31.172859];

        // 初始化地图
        const map = new AMap.Map('container', {
            zoom: 16,  // 缩放级别
            center: templePosition,
            mapStyle: 'amap://styles/grey'  // 自定义地图样式
        });

        // 创建信息窗口内容
        const infoWindowContent = `
            <div class="info-title">龙华寺</div>
            <div class="info-content">
                <p>📍地址：上海市徐汇区龙华路2853号</p>
                <img src="https://s21.ax1x.com/2025/03/24/pEBy3uT.webp" alt="龙华寺实景">
                <p>${document.getElementById('desc').textContent}</p>
            </div>
        `;

        // 创建标记
        const marker = new AMap.Marker({
            position: templePosition,
            map: map,
            title: '点击查看详情'
        });

        // 创建信息窗口
        const infoWindow = new AMap.InfoWindow({
            content: infoWindowContent,
            offset: new AMap.Pixel(0, -30)
        });

        // 绑定点击事件
        marker.on('click', () => {
            infoWindow.open(map, marker.getPosition());
        });

        // 默认打开信息窗口
        infoWindow.open(map, templePosition);
    </script>

    <!-- 隐藏的简介数据 -->
    <div id="desc" style="display:none;">
        龙华寺是上海历史最久、规模最大的古刹，始建于三国时期，现存建筑多为清代重建。寺院占地2万余平方米，中轴线上排列着弥勒殿、天王殿、大雄宝殿等六进殿堂。龙华塔为宋代建筑，2006年被列为全国重点文物保护单位。
    </div>
</body>
</html>